<template>
    <el-card>
        <div slot="header">短消息列表
            <el-button type="primary"
                       size="small"
                       @click="$router.push('/new_message')">发短消息
            </el-button>
        </div>
        <div>
            <el-radio-group v-model="type" @change="fetch">
                <el-radio-button :label="0">收件箱</el-radio-button>
                <el-radio-button :label="1">已发送</el-radio-button>
            </el-radio-group>
        </div>
        <el-table
                v-loading="loading"
                :data="list"
                :row-class-name="rowClass"
                @row-click="read"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column label="来自" width="80" v-if="type===0" prop="from.username"/>
            <el-table-column label="标题" prop="title"/>
            <el-table-column label="发送时间" prop="created_at"/>
        </el-table>
        <br>
        <el-button :disabled="selected.length === 0" @click="del()">删除</el-button>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="$store.state.pageSize"
                :current-page.sync="page"
                @current-change="fetch"
                :total="total"
                class="inline-block"/>
    </el-card>
</template>

<script>
    export default {
        data() {
            return {
                loading: true,
                type: 0,
                page: 0,
                total: 0,
                list: [],
                selected: [],
            };
        },
        methods: {
            handleSelectionChange(rows) {
                this.selected = rows.map(item => item.id);
                return false;
            },
            del() {
                this.$http.delete('/api/message/', {params: {id: this.selected.join(',')}}).then(res => {
                    this.$message.success('成功删除');
                    this.fetch();
                }).catch(err => {
                    this.$message.error(err.response.data);
                });
            },
            fetch() {
                this.list = [];
                this.loading = true;
                this.$http.get('/api/message', {params: {page: this.page, type: this.type}}).then(res => {
                    this.loading = false;
                    const data = res.data;
                    data.list.forEach(item => {
                        item.created_at = moment(item.created_at).calendar();
                    });
                    this.page = data.page;
                    this.total = data.total;
                    this.list = data.list;
                });
            },
            read(row, e, column) {
                if (column.type === 'selection') return;
                this.$http.get('/api/message/' + row.id, {params: {type: this.type}}).then(({data}) => {
                    row.read = true;
                    this.$alert(data.content, data.title, {confirmButtonText: '确定'});
                }).catch(err => {
                    this.$message.error(err.response.data);
                });
            },
            rowClass({row}) {
                if (row.hasOwnProperty('read') && !row.read)
                    return 'unread';
                return '';
            }
        },
        mounted() {
            this.$store.state.user.message = false;
            this.fetch();
        }
    }
</script>

<style>
    .el-table .unread {
        background: oldlace;
    }

    .el-table .unread * {
        font-weight: bold;
    }
</style>